<template>
  <div>
    <div>
      <el-button color="#3A62D7" :disabled='!store.state.roleCodes.includes("Create-Role")' style="height: 28px" type="primary" @click="addRole()"
        >Create</el-button
      >
    </div>
    <el-table
      max-height="370"
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{
        background: '#EFEFEF',
        color: '#101010',
        height: '54px',
        border: '1px solid #fff'
      }"
      :cell-style="{ height: '26px', fontSize: '12px', padding: '5px 0' }"
    >
      <el-table-column type="index" label="No." width="70" />
      <el-table-column prop="roleKey" label="Role Code" width="180" />
      <el-table-column prop="roleName" label="Role Name" width="180" />
      <el-table-column prop="description" label="Description" />
      <el-table-column label="Operation" width="224">
        <template #default="scope">
          <el-button
            size="small"
            color="#3A62D7"
            @click="handleDetail(scope.row)"
            :disabled='!store.state.roleCodes.includes("Role-Detail")'
            >Detail</el-button
          >
          <el-button
            size="small"
            color="#3A62D7"
            @click="handleUpdate(scope.row)"
            :disabled='!store.state.roleCodes.includes("Update-Role")'
            >Update</el-button
          >
          <el-button
            size="small"
            color="#BD3124"
            @click="handleDelete(scope.row)"
            :disabled='!store.state.roleCodes.includes("Detele-Role")'
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100, 200, 300, 400]"
        small="small"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
import { getRoleList, roleDelete } from '@/api/role'
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
const store = useStore()

onMounted(() => {
  getRolesList()
})

const router = useRouter()

let currentPage = ref(1)
let pageSize = ref(10)

const tableData = ref([])
const getRolesList = async () => {
  const res = await getRoleList({
    pageNo: currentPage.value,
    pageSize: pageSize.value
  })
  if(res.data.code === '0'){
    tableData.value = res.data.data.records
  }
}

const handleDetail = async (row) => {
  console.log(row);
  localStorage.setItem('roleId', row.roleId)
  localStorage.setItem('mode', 'Detail')
  router.push({
    path: '/setings/roleDetail',
    query: {roleId: row.roleId,
    mode: 'Detail'}
  })
}

const handleUpdate = async (row) => {
  localStorage.setItem('roleId', row.roleId)
  router.push({
    path: '/setings/updateRole',
    query: {roleId: row.roleId}
  })
}

const handleDelete = async (row) => {
  ElMessageBox.confirm('确认删除吗?', 'Warning', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    confirmButtonClass: 'el-button--confirm',
    cancelButtonClass: 'el-button--cancel',
  }).then(async () => {
    const res = await roleDelete({ roleids: row.roleId })
    if (res.data.code === '0') {
      ElMessage.success('删除成功')
      getRolesList()
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  getRolesList()
  console.log(`${val} 条每页`)
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getRolesList()
  console.log(`页码: ${val}`)
}

const addRole = () => {
  router.push('/setings/createRole')
}
</script>

<style scoped lang="scss">
.el-table {
  margin-top: 20px;
}
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
</style>
<style lang=scss>
.el-button--confirm{
  background: #3A62D7 !important;
  border: none !important;
}
.el-button--cancel, .el-button--confirm{
  height: 28px !important;
  font-size: 14px !important;
  width: 62px;
}
</style>
